<template>
    <div id="App">
        <div class="findPw_container">
            <!--<img src="../assets/logo1.png" alt="">-->
            <div class="findPw_box">
                <!-- <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div> -->
                <span class="title">找回密码</span>
                <el-form ref="" :model="FindPwForm" :rules="FindPwFormRules" label-width="0px"
                    class="findPw_form">
                    <!--用户名-->
                    <el-form-item label="" prop="username">
                        <el-input v-model="FindPwForm.username" placeholder="学号" prefix-icon=""></el-input>
                    </el-form-item>
                    <!--身份证号-->
                    <el-form-item label="" prop="idcardNum">
                        <el-input v-model="FindPwForm.idcardNum" placeholder="身份证号" prefix-icon="">
                        </el-input>
                    </el-form-item>
                    <!-- <el-button type="text" style="display:flex;">忘记密码？</el-button> -->
                    <el-form-item class="btn2">
                        <el-button type="primary" @click="resetPw">重置密码</el-button>
                        <el-button type="primary" @click="relogin">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 表单的数据绑定对象
      FindPwForm: {
        username: '',
        idcardNum: ''
      },
      // 表单的验证规则对象
      FindPwFormRules: {
        username: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 9, max: 9, message: '长度非法！', trigger: 'blur' }
        ],
        idcardNum: [
          { required: true, message: '身份证号码不能为空', trigger: 'blur' },
          { min: 18, max: 18, message: '长度非法！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetPw () {
      // 验证是否为该学生的个人信息
      if (this.FindPwForm.username == '' || this.FindPwForm.username.length != 9) {
        this.$msgbox.alert('请输入要正确的学号!')
        // location.reload();
        // this.$router.go(0);
        // if(this.FindPwForm.idcardNum == ''){
        //     this.$msgbox.alert('请输入身份证号');
        // }
        // if(this.FindPwForm.username.length != 9){
        //     this.$msgbox.alert('请输入正确的账号！')
        // }
      } else {
        this.$msgbox.alert('密码已重置为身份证号后六位！')
        this.$router.push('/ResetPw')
      }
    },
    relogin () {
      this.$router.push('/Login')
    }
  }
}

</script>

<style scoped>
.findPw_container {
    height: 100%;
    background-color: #eee;
}

.findPw_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.title {
    color: #409EFF;
    display: flex;
    margin-top: 30px;
    margin-left: 20px;
    font-size: 24px;
}

.findPw_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    /* margin-top: 20px; */
}

.btn1 {
    display: flex;
    justify-content: flex-end;
}

.btn2 {
    display: flex;
    justify-content: center;
}
</style>
